<template>
	<Layui :heightIsAuto="true" background="#F4F4F4" @LeftHeadClick="LeftHeadClick" :customCallBackHead="true" :isFixedHead="false" :headShow="true" :HeadBarData="HeadBarData">
		    <template #customHead>
		    </template>
			<view class="contentBox">
				<sticky :scrollTop="scrollTop" @sticky="stickyChange">
					<view :class="stickyComputed">
						<!-- <Skeleton outerClass="tabs" :preloadList="contentBoxSkeleton"></Skeleton> -->
						<tabs size="30" selectedSize="35" :background="isSticky?'#EBF2FE':'#fff'" :height="90" :tabs="tabs" isDot scroll alignLeft></tabs>
					</view>
				</sticky>
				<view class="waterfallScreen">
					<fui-waterfall leftGap="20" rightGap="20">
						<fui-waterfall-item v-for="(item,index) in images" :key="index" :src="item">
							<template #upper>
								<view class="waterFallStatus">
									<fui-tag radius="8px" text="进行中" type="primary"></fui-tag>
								</view>
							</template>
							<view class="waterfallContent">
								<view class="title p-space">
									<text class="fontSizeZhuBiaoTi3">24小时周天鄱阳湖环湖骑行300KM活动活动活动活动活动活动活动</text>
								</view>
								<view class="tags flexAlignCenter">
									<view class="tag">
										<fui-tag :padding="tagPadding" text="免费" type="primary" theme="light"></fui-tag>
									</view>
									<view class="tag">
										<fui-tag :padding="tagPadding" text="骑行" type="purple" theme="light"></fui-tag>
									</view>
								</view>
								<view class="content">
									<image src="/static/img/icon/position.svg"></image>
									<text class="fontSizeFuBiaoTi3 p-space">南昌市/红谷滩区/学府大道666号</text>
								</view>
								<view class="content flexAlignCenter" style="justify-content: space-between;padding: 0px 25rpx 15rpx 25rpx;">
									<text style="padding-right: 10rpx;" class="fontSizeFuBiaoTi3 p-space p-space1">发起人:小太阳</text>
									<view class="perCapita flexAlignCenter">
										<image style="padding-right:5rpx" src="/static/img/icon/perCapita.svg"></image>
										<text style="color:#f7a85f" class="fontSizeFuBiaoTi3">免费</text>
									</view>
								</view>
							</view>
						</fui-waterfall-item>
					</fui-waterfall>
				</view>
			</view>
			<tabBar @click="tabBarClick" :tabBar="tabBarData"></tabBar>
	</Layui>
</template>

<script>
	import {tabBarData} from "@/menu/index.js"
	import tabBar from "@/components/firstui/fui-tabbar/fui-tabbar.vue"
	import fuiWaterfall from "@/components/firstui/fui-waterfall/fui-waterfall.vue"
	import fuiWaterfallItem from "@/components/firstui/fui-waterfall-item/fui-waterfall-item.vue"
	import sticky from "@/components/firstui/fui-sticky/fui-sticky.vue"
	import tabs from "@/components/firstui/fui-tabs/fui-tabs.vue"
	import SearchBox from "@/components/searchBox.vue"
	import IctCascader from "@/components/IctCascader.vue"
	import { contentBoxSkeleton } from "../../skeleton/index"
	export default {
		components:{IctCascader,SearchBox,tabs,sticky,fuiWaterfall,fuiWaterfallItem,tabBar},
		data() {
			return {
				tagPadding:['8rpx','8px'],
				tabBarData:tabBarData,
				scrollTop:0,
				//是否处于吸顶状态
				isSticky:false,
				statusBarHeight:null,
							images: [
								'https://res.firstui.cn/static/images/component/waterfall/P_001.jpeg',
								'https://res.firstui.cn/static/images/component/waterfall/P_002.jpeg',
								'https://res.firstui.cn/static/images/component/waterfall/P_003.jpeg',
								'https://res.firstui.cn/static/images/component/waterfall/P_004.jpeg',
								'https://res.firstui.cn/static/images/component/waterfall/P_005.jpeg',
								'https://res.firstui.cn/static/images/component/waterfall/P_006.jpeg',
								'https://res.firstui.cn/static/images/component/waterfall/P_007.jpeg',
								'https://res.firstui.cn/static/images/component/waterfall/P_008.jpeg',
								'https://res.firstui.cn/static/images/component/waterfall/P_009.jpeg',
								'https://res.firstui.cn/static/images/component/waterfall/P_010.jpeg',
								'https://res.firstui.cn/static/images/component/waterfall/P_011.jpeg',
								'https://res.firstui.cn/static/images/component/waterfall/P_012.jpeg',
							],
				tabs:[
					{
					name:"热点活动",
					},
					{
						name:"公路车",
					},
					{
						name:"羽毛球",
					},
					{
						name:"王者荣耀",
					},
					{
						name:"户外旅游",
					},
					],
				contentBoxSkeleton:contentBoxSkeleton,
				HeadBarData:{
					data:{title:"",textColor:"#ffffff",fontSize:"34rpx"},
					toReturn:false,BackColor:"url('/static/bj.jpg') 0 0 / 100% 100% no-repeat",imageUrl:"/static/Headbar/leftWhile.png",
					backgroundImage:"",
					height:350
				},
				deptArr:[
					{label:"测试数据1",id:1},
					{label:"测试数据2",id:2},
					{label:"测试数据3",id:3},
				]
			}
		},
		onLoad() {
			// this.$message({message:'很长很长的消息提示你知道吗这一辈子',type: 'info',duration: 3000,position: 'top'})
			// uni.navigateTo({
			// 	url: `/pages/login/login`
			// });

		},
		methods: {
			LeftHeadClick(){
				uni.redirectTo({
					url: `/pages/login/login`
				});
			},
			//吸顶
			stickyChange(obj){
				console.log(obj)
				this.isSticky = obj.isFixed
			},
			tabBarClick(obj){
				if(obj.index === 4){
					 uni.switchTab({
						url: `/pages/my/my`
					 })
				}
			}
		},
		created() {
		  const info = uni.getSystemInfoSync()
		  this.statusBarHeight = info.statusBarHeight
		},
		computed:{
			stickyComputed(){
				return this.isSticky?'isStickyAcitive tabs':'tabs'
			}
		},
		onPageScroll(options){
			this.scrollTop = options.scrollTop
		}
	}
</script>

<style scoped lang="scss">
	.contentBox{
		display:flex;
		flex-direction: column;
	}
	.tabs{
		background-color: #fff;
		position: relative;
		padding: 20rpx 0px 30rpx 0px;
	}
	.waterfallScreen{
	}
	.isStickyAcitive{
		padding: 160rpx 0px 10rpx 0px;
		background-color: #EBF2FE;
	}
	.waterfallContent{
		box-shadow: rgba(0, 0, 0, 0.1) 0px 2px 12px 0px;
		display: flex;
		flex-direction: column;
		background-color: #fff;
		.title{
			line-height: 40rpx;
			padding: 20rpx 20rpx 10rpx 20rpx;
		}
		.tags{
			padding: 10rpx 15rpx 10rpx 15rpx;
			.tag{
				margin-right: 10rpx;
			}
		}
		.time{
			display: flex;
			padding: 0px 15rpx 15rpx 15rpx;
			image{
				flex-shrink: 0;
				padding-right: 10rpx;
				height: 35rpx;
				width: 35rpx;
			}
		}
		.content{
			display: flex;
			padding: 0rpx 15rpx 15rpx 15rpx;
			image{
				padding-top: 5rpx;
				flex-shrink: 0;
				padding-right: 10rpx;
				height: 30rpx;
				width: 30rpx;
			}
			.p-space1{
				    -webkit-line-clamp: 1; /* 设置显示的行数 */
					max-height: calc(1 * 1.18rem); /* 另一种控制行数的方式，但不如 -webkit-line-clamp 精确 */	
			}
		}
	}
	.waterFallStatus{
		position: absolute;
		top:-1px;
		left:0px;
	}
</style>
